<%= javascript_include_tag 'markermanager' %>

<script type="text/javascript">

    var iconData = {
        "sco": { width: 34, height: 20 },
        "wales": { width: 34, height: 20 },
        "ni": { width: 34, height: 20 },
        "ireland": { width: 34, height: 20 },
        "eng": { width: 34, height: 20 },
        "flag-shadow": { width: 60, height: 45 },

        "house": { width: 32, height: 32 },
        "house-shadow": { width: 59, height: 32 },
        "city": { width: 32, height: 32 },
        "city-shadow": { width: 59, height: 32 }
    };

    var officeLayer = [
        {
            "zoom": [0, 6],
            "places": [
                {
                    "name": "Scotland (5 changing rooms)",
                    "icon": ["sco", "flag-shadow"],
                    "posn": [55.95989956952263, -3.8726806640625],
                },
                {
                    "name": "England (0 changing rooms)",
                    "icon": ["eng", "flag-shadow"],
                    "posn": [53.08082737207479, -1.0546875],
                },
                {
                    "name": "Wales (0 changing rooms)",
                    "icon": ["wales", "flag-shadow"],
                    "posn": [52.382305628707854, -3.22998046875],
                },
                {
                    "name": "Ireland (0 changing rooms)",
                    "icon": ["ireland", "flag-shadow"],
                    "posn": [53.27835301753182, -7.174072265625],
                },
                {
                    "name": "Northern Ireland (0 changing rooms)",
                    "icon": ["ni", "flag-shadow"],
                    "posn": [54.55295156056188, -6.448974609375],
                },
            ]
        },
        {
            "zoom": [7, 11],
            "places": [
                {
                    "name": "Glasgow (4 changing rooms)",
                    "icon": ["city", "city-shadow"],
                    "posn": [55.864475427411534, -4.255399703979492],
                },
                {
                    "name": "Edinburgh (1 changing rooms)",
                    "icon": ["city", "city-shadow"],
                    "posn": [55.95102602164931, -3.200969696044922],
                }
            ]
        },
        {
            "zoom": [12, 17],
            "places": [
                <% for toilet in @toilets %>

                {
                    "name": "<%= toilet.name -%>",
                    "posn": [<%= toilet.lat -%>, <%= toilet.long -%>],
                    //"icon": ["house", "house-shadow"],
                    "blurb": '<h3>' + unescape('<%= replace_stuff(toilet.name) -%>') + '</h3><p>' + unescape('<%= escape_javascript(toilet.address) -%>') + '</p>' +
                             '<a href=\'#\' onclick=\"' +
                             '$.get(\'/entry/show/<%= toilet.id -%>\', {}, function(data) { $(\'#content\').fadeOut(1000, function () { $(\'#content\').html(data); $(\'#content\').fadeIn(1000); }); });'
                            + '\">Show More</a>'
                },
                <% end %>

            ]
        }
    ];
</script>

<script type="text/javascript">
    //<![CDATA[
    var map;
    var mgr;
    var icons = {};
    var allmarkers = [];

    function clearDefault(el) {
        if (el.defaultValue == el.value) el.value = ""
    }


    function load() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map"));
            map.addControl(new GLargeMapControl());
            map.addControl(new GOverviewMapControl());
            map.setCenter(new GLatLng(54.91451400766527, -2.7685546875), 5);
            map.enableDoubleClickZoom();
            mgr = new MarkerManager(map, {
                trackMarkers: true
            });
            window.setTimeout(setupOfficeMarkers, 0);


        }
    }

    var geocoder = new GClientGeocoder();

    function showAddress(address) {
        geocoder.getLatLng(
                address,
                function(point) {
                    if (!point) {
                        alert(address + " not found");
                    } else {
                        map.setCenter(point, 12);
                    }
                }
                );

    }

    function getIcon(images) {
        var icon = null;
        if (images) {
            if (icons[images[0]]) {
                icon = icons[images[0]];
            } else {
                icon = new GIcon();
                icon.image = "images/" +
                             images[0] +
                             ".png";
                var size = iconData[images[0]];
                icon.iconSize = new GSize(size.width, size.height);
                icon.iconAnchor = new GPoint(size.width >> 1, size.height >> 1);
                icon.shadow = "images/" +
                              images[1] +
                              ".png";
                size = iconData[images[1]];
                icon.shadowSize = new GSize(size.width, size.height);
                icons[images[0]] = icon;
            }
        }
        return icon;
    }

    function setupOfficeMarkers() {
        allmarkers.length = 0;
        for (var i in officeLayer) {
            if (officeLayer.hasOwnProperty(i)) {
                var layer = officeLayer[i];
                var markers = [];
                for (var j in layer["places"]) {
                    if (layer["places"].hasOwnProperty(j)) {
                        var place = layer["places"][j];
                        var icon = getIcon(place["icon"]);
                        var title = place["name"];
                        var posn = new GLatLng(place["posn"][0], place["posn"][1]);
                        var marker = createMarker(posn, title, icon, place["blurb"]);
                        markers.push(marker);
                        allmarkers.push(marker);
                    }
                }
                mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
            }

        }
        mgr.refresh();
    }

    function createMarker(posn, title, icon, blurb) {
        var marker = new GMarker(posn, {
            title: title,
            icon: icon,
            draggable: false
        });

        marker.bindInfoWindowHtml(blurb);

        GEvent.addListener(marker, "click", function(latlng) {

            if (latlng && map.getZoom() < 7) {
                map.setCenter(latlng);
                map.setZoom(7);
            }

            else if (latlng && map.getZoom() < 12) {
                map.setCenter(latlng);
                map.setZoom(12);
            }
        });

        return marker;
    }

    function showMarkers() {
        mgr.show();
    }

    function hideMarkers() {
        mgr.hide();
    }

    function deleteMarker() {
        var markerNum = parseInt(document.getElementById("markerNum").value);
        mgr.removeMarker(allmarkers[markerNum]);
    }

    function clearMarkers() {
        mgr.clearMarkers();
    }

    function reloadMarkers() {
        setupOfficeMarkers();
    }


    //]]>
</script>


</head>
<body onload="load()" onunload="GUnload()">

<div id="header" class="row">

  <div class="column grid_3">
    <div id="logo">
      <a href="http://weedayout.com"><img src="images/wdo-logo.png" border="0" alt="WeeDayOut.com - Putting accessible toilets on the map."/></a>
    </div>
  </div>

  <div class="column grid_3">
    <div id="search">
      <h2>Find a toilet near me:</h2>

      <form id="top-search-form" action="#" method="get" onsubmit="showAddress(document.getElementById('search-field').value); return false;">
        <input id="search-field" type="field" value="Enter your town or postcode..." onFocus="clearDefault(this)"/>
        <input type="image" src="images/button-search.jpg" alt="Search">
      </form>
    </div>
  </div>

  <div class="column grid_3">
    <div id="explore">
      <h2>Where can I go?</h2>

      <p class="description">Find new places to visit that have the facilities you need.</p>
      <img src="images/button-explore.jpg" border="0" alt="Explore"/>
    </div>
  </div>

  <div class="column grid_3">
    <div id="add">
      <%= link_to image_tag("button-add-toilet.jpg", :border=>0, :alt => 'If you know of an accessible toilet, add it to the map'), new_toilet_path %>
      <br/><br/>
      <%= image_tag("button-add-gap.jpg", :border=>0, :alt => 'Tell us where you\'d like an accessible toilet. Add a gap to the map') %>
    </div>
  </div>

</div>

<div id="container" class="row">

  <div class="column grid_7">
    <div id="map"></div>
    <div>
      <h3>Recently Updated</h3>

      |<% for recent in @recents_updated %>
          <a href='#' onclick="
          $.get('/entry/show/<%= recent.id -%>', {},function(data) { $('#content').fadeOut(1000, function () { $('#content').html(data); $('#content').fadeIn(1000); }); });
          "><%= recent.name -%></a> |
      <% end %>
    </div>
  </div>

  <div class="column grid_5">
    <div id="content">
      <p style="color: green"><%= flash[:notice] %></p>

      <p><strong>Weedayout.com</strong> is pinpointing accessible toilets across Scotland so you can enjoy a fun day
        out
        without getting caught short. We know there are more facilities out there we just don't know where they are
        that's why you, the people who know, can add them. And if you know where one should be, you can add a gap
        to the map too.</p>
    </div>
  </div>

</div>


<div id="footer" class="row">
  <div class="column grid_12">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Campaign</a></li>

      <li><a href="#">Blog</a></li>
      <li>Copyright 2009 Weedayout.com</li>
    </ul>
  </div>
</div>